<template>
  <div class="amap-wrapper">
      <el-amap
            ref="map"
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo"
            style="height: 500px;width: 100%"
                        >
           <el-amap-marker v-for="(u,i) in markers" :position="u.position" :key="i">
           </el-amap-marker>
           <el-amap-marker :position="[108.95, 34.27]" :icon="icon">
           </el-amap-marker>
        </el-amap>
 </div>
</template>

<script>
export default {
        name: 'index',
        data() {
            return {
                center: [108.95, 34.27],
                zoom: 12,
                position: [108.95, 34.27],
                icon: require('../assets/g.svg'),//自定义地图标记点图片
                events: {
                    init(o){
                        console.log(o.getCenter());
                    },
                    zoomchange: (e) => {
                        console.log(e);
                    },
                    zoomend: (e) => {
                        //获取当前缩放zoom值
                        console.log(this.$refs.map.$$getInstance().getZoom());
                        console.log(e);
                    },
                    click: e => {
                        alert('map clicked')
                    }
                },
                markers: [
                    {
                        position: [108.95, 34.27]
                    },
                    {
                        position: [108.95, 34.27]
                    }
                ],
               //使用其他组件
                plugin: [
                    {
                        pName: 'Scale',
                        events: {
                            init(instance) {
                                console.log(instance)
                            }
                        }
                    },
                    {
                        pName: 'ToolBar',
                        events: {
                            init(instance) {
                                console.log(instance)
                            }
                        }
                    }
                ],
            };
        },
        methods: {
        }
    }

</script>

<style>

</style>